<template>
  <div class="user_right fl ml20" v-loading="isclerk">
    <div class="clerk_table">
      <table>
        <colgroup>
          <col width="81" />
          <col width="129" />
          <col width="162" />
          <col width="102" />
          <col width="131" />
          <col width="171" />
          <col width="131" />
        </colgroup>
        <tbody>
          <tr class="clerk_tr_top">
            <th>姓名</th>
            <th>登录名</th>
            <th>管理店铺</th>
            <th>角色</th>
            <th>状态</th>
            <th>权限管理</th>
            <th>操作</th>
          </tr>
        </tbody>
        <tbody>
          <tr class="clerk_tr_content" v-for="(item,index) in clerkList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>
              <span v-for="(itema,idnexa) in item.xxx" :key="idnexa" style="margin:0 3px">{{itema}}</span>
            </td>
            <td>{{item.role_name}}</td>
            <td>启用</td>
            <td>
              <!-- <span>设置权限</span> -->
              <span @click="disable(item)">停用</span>
            </td>
            <td>
              <img
                @click="edit_popup_window = true"
                src="../../../assets/img/btnModify.png"
                alt="编辑"
              />
              <img
                ref="refresh"
                @click="btn_refresh"
                src="../../../assets/img/btnRefresh.png"
                alt="刷新"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="btn_add" @click="centerDialogVisible = true">新增店员</div>
    <el-dialog title="新增管理员" :visible.sync="centerDialogVisible" width="40%" center>
      <el-form :model="new_clerk" :rules="rele_clerk" ref="new_clerk">
        <div class="popup_body_add">
          <div>
            <p>
              <span>绑定店铺:</span>
            </p>
            <el-select class="ipt" v-model="stroeId" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div>
            <p>
              <span>姓名:</span>
            </p>
            <el-form-item prop="name">
              <el-input class="ipt" v-model="new_clerk.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </div>
          <div>
            <p>
              <span>角色:</span>
            </p>
            <el-form-item prop="character">
              <el-input class="ipt" v-model="new_clerk.character" placeholder="请输入角色名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <p>
              <span>手机号:</span>
            </p>
            <el-form-item prop="phone_number">
              <el-input class="ipt" v-model="new_clerk.phone_number" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </div>
          <div>
            <p>
              <span>用户密码:</span>
            </p>
            <el-form-item prop="password">
              <el-input class="ipt" v-model="new_clerk.password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>
          <div>
            <p>
              <span>确认密码:</span>
            </p>
            <el-form-item prop="confirm_password">
              <el-input class="ipt" v-model="new_clerk.confirm_password" placeholder="请确认密码"></el-input>
            </el-form-item>
          </div>
          <div class="btns">
            <el-button type="primary" @click="conservation('new_clerk')">保 存</el-button>
            <el-button @click="centerDialogVisible = false">取 消</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="edit_popup_window" width="40%" center>
      <el-form :model="modify_the" :rules="rule_the" ref="modify_the">
        <div class="popup_body_add">
          <div>
            <p>
              <span>姓名:</span>
            </p>
            <el-form-item prop="name">
              <el-input class="ipt" v-model="modify_the.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </div>
          <div>
            <p>
              <span>手机号:</span>
            </p>
            <el-form-item prop="mobile">
              <el-input class="ipt" v-model="modify_the.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </div>
          <div class="btns">
            <el-button @click="edit_popup_window = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('modify_the')">确 定</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  ovistoreList,
  addclerk,
  assistantList,
  accountdisabl,
} from "@/api/business";
export default {
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.new_clerk.confirm_password !== "") {
          this.$refs.new_clerk.validateField("confirm_password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.new_clerk.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      centerDialogVisible: false,
      edit_popup_window: false,
      isclerk: true,
      new_clerk: {
        name: "",
        character: "",
        phone_number: "",
        password: "",
        confirm_password: "",
      },
      storeList: [],
      clerkList: [],
      stroeId: "",
      disableId: "",
      rotateTimes: 1,
      modify_the: {
        name: "",
        mobile: "",
      },
      rule_the: {
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        mobile: [{ required: true, validator: checkMobile, trigger: "blur" }],
      },
      rele_clerk: {
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        character: [
          { required: true, message: "请填写角色名称", trigger: "blur" },
        ],
        phone_number: [
          { required: true, validator: checkMobile, trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        confirm_password: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getovistoreList();
  },
  methods: {
    btn_refresh() {
      let refreshDom = this.$refs.refresh;
      refreshDom.style.tranform = "rotate(" + 360 * this.rotateTimes + "deg)";
      refreshDom.style.webkitTransform =
        "rotate(" + 360 * this.rotateTimes + "deg)";
      refreshDom.style.mozTransform =
        "rotate(" + 360 * this.rotateTimes + "deg)";
      refreshDom.style.msTransform =
        "rotate(" + 360 * this.rotateTimes + "deg)";
      refreshDom.style.oTransform = "rotate(" + 360 * this.rotateTimes + "deg)";
      refreshDom.style.transform = "rotate(" + 360 * this.rotateTimes + "deg)";
      this.rotateTimes++;
    },

    // 修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.edit_popup_window = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 保存
    conservation(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            business_id: this.stroeId,
            phone: this.new_clerk.phone_number,
            name: this.new_clerk.name,
            role_name: this.new_clerk.character,
            password: this.new_clerk.password,
          };
          addclerk(data);
          this.centerDialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getovistoreList() {
      this.storeList = await ovistoreList();
      this.getclerkList();
    },

    // 店员列表
    async getclerkList() {
      let data = [];
      let daasd = [];
      for (let i in this.storeList) {
        const res = await assistantList(this.storeList[i].id);
        for (let j in res) {
          res[j].xxx = [];
          res[j].xxx.push(this.storeList[i].name);
          data.push(res[j]);
        }
      }
      let result = [];
      for (var i = 0; i < data.length; i++) {
        var flag = true;
        for (var j = 0; j < result.length; j++) {
          if (data[i].id === result[j].id) {
            data[j].xxx.push(data[i].xxx[0]);
            flag = false;
          }
        }
        if (flag) {
          result.push(data[i]);
        }
      }
      this.clerkList = result;
      this.isclerk = false;
    },

    // 账号停用
    disable(item) {
      this.$confirm("此操作将永久停用此账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var data = {
            user_id: item.id,
          };
          accountdisabl(item.businesses[0].id, data);
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch((e) => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>


<style lang="scss" scope>
.clerk_tr_top {
  height: 50px;
  background: #e5e5e5;
}
.clerk_table {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.clerk_tr_content {
  height: 50px;
  border-bottom: 2px dashed #e5e5e5;
  > td {
    text-align: center;
    &:nth-child(6) {
      color: #3333ff;
      > span {
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 5px;
        }
        &:nth-child(2) {
          margin-left: 5px;
        }
      }
    }
    &:nth-child(7) {
      img {
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 5px;
        }
        &:nth-child(2) {
          margin-left: 5px;
          transition: all 0.8s ease-in-out;
        }
      }
    }
  }
}
.btn_add {
  font-size: 18px;
  color: #fff;
  width: 170px;
  height: 40px;
  border-radius: 5px;
  background-color: #4448f8;
  line-height: 40px;
  text-align: center;
  margin: 50px auto;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  &:hover {
    background: #777acc9d;
  }
}
.ipt {
  width: 280px;
  .el-input__inner {
    height: 40px;
  }
}
.popup_body_add {
  > div {
    display: flex;
    margin-bottom: 30px;
    align-items: center;
    font-size: 18px;
    color: #666;
    > p {
      width: 220px;
      text-align: right;
      margin-right: 15px;
      > span {
        &::before {
          content: "*";
          color: red;
          margin-right: 5px;
        }
      }
    }
    .el-input {
      margin-left: 15px;
    }
  }
  .el-form-item__error {
    left: 15px;
  }
}
.dialog-footer {
  > button {
    width: 120px;
    height: 40px;
    font-size: 18px;
  }
}
.btns {
  display: flex;
  justify-content: center;
}
</style>